import React, { Component } from 'react';
import axios from './http'
export default class List extends Component {

  state = {
    list: [],
    page: 1, // 当前页
    pageSize: 10, //每页条数

  }



  componentDidMount() {

    axios.get('/api/list').then((res) => {

      // 成功获取完数据后 更新state的list值
      this.setState({ list: res.list });

      //根据获取的数据长度计算出 总页数
      let totalPage = Math.ceil(res.list.length / this.state.pageSize);

      // 将总页数设置给state.totalPage
      this.setState({ totalPage: totalPage });

    })
  }

  // 下一页
  nextPage(page) {

    if (page >= this.state.totalPage) {

    } else {
      page++;
    }

    this.setState({ page: page });
  }

  // 上一页
  prevPage(page) {
    if (page === 1) {
      page = 1;
    } else {
      page--;
    }

    this.setState({ page: page });
  }

  // 到某个特定页面
  goPage(page) {
    if (page < 1) {
      page = 1;
    }

    if (page > this.state.totalPage) {
      page = this.state.totalPage;
    }
    this.setState({ page: page });
  }

  render() {
    let { list, page, pageSize, totalPage } = this.state;

    // 构造一个最简单的数组，为了使用map方式渲染ui
    let arr = [];
    for (var i = 1; i < totalPage + 1; i++) {
      arr.push(i);
    }

    return (

      <div>
        一共  {totalPage} 页 当前页数：{page}
        <button onClick={() => {
          this.prevPage(page);
        }}>上一页</button>
        <button onClick={() => {
          this.nextPage(page);
        }}>下一页</button>

        <select onChange={({ target }) => {
          console.log('onChange', target.value);
          this.goPage(target.value);
        }}>
          {arr.map((item) => {
            return <option key={item} value={item}>{item}</option>
          })}

        </select>

        <div>
          {arr.map((item) => {
            return <button key={item} onClick={() => {
              this.goPage(item);
            }}>{item}</button>
          })}
        </div>


        <ul>
          {
            list.slice((page - 1) * pageSize, page * pageSize).map((item) => {
              return <li key={item.id}>{item.name}</li>
            })}
        </ul>

      </div>
    )
  }
}